<template>
	<view class="page">
		<u-text text="销售人员月度业绩分析报告" bold></u-text>
		<view class="charts-box1">
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch='true' tooltipFormat="tooltip1" />
		</view>
		<!-- 占比 -->
		<u-text text="销售人员月度业绩分析报告" bold></u-text>
		<view class="charts-box2">
			<qiun-data-charts type="pie" :opts="opts1" :chartData="chartData1" />
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			chartData: {},
			opts: {
				color: ["#D7E0FB"],
				enableScroll: true,
				padding: [15, 15, 0, 5],
				legend: { show: false },
				update: true,
				xAxis: {
					disableGrid: true,
					itemCount: 6,
					axisLineColor: '#3662EC'
				},
				yAxis: {
					disabled: true,
					disableGrid: true,
				},
				extra: {
					column: {
						type: "group",
						activeBgOpacity: 0,
						linearType: "none",
						categoryGap: 4,
						linearOpacity: 0.5,
						barBorderCircle: true,
					}
				},
				series: {
					textColor: "#3662EC",
					format: 'prefixYuan'
				}
			},
			chartData1: {},
			opts1: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: true,
						borderWidth: 3,
						borderColor: "#FFFFFF"
					}
				}
			}
		}
	},
	methods: {
		getServerData() {
			console.log('getServerData');
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: ["销售1", "销售2", "销售3", "销售4", "销售5", "销售6", "销售7", "销售8"],
					series: [
						{
							name: "",
							textColor: "#3662EC",
							data: [35, 36, 33, 13, 34, 33, 26, { value: 27, color: '#3662EC' }],
							format: 'prefixYuan'
						},
					]
				}
				this.chartData = JSON.parse(JSON.stringify(res));
			}, 1000);
		},
		getPieData() {
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					series: [
						{
							data: [
								{ "name": "销售1", "value": 50 },
								{ "name": "销售2", "value": 30 },
								{ "name": "销售3", "value": 20 },
								{ "name": "销售4", "value": 18 },
								{ "name": "销售5", "value": 8 },
								{ "name": "销售6", "value": 25 },
								{ "name": "销售7", "value": 14 },
								{ "name": "销售8", "value": 47 },
							]
						}
					]
				};
				this.chartData1 = JSON.parse(JSON.stringify(res));
			}, 500);
		}
	}
}
</script>
<style lang="scss" scoped>
.page {
	padding: 60rpx 40rpx 0 40rpx;
}

.charts-box1 {
	background-color: white;
	margin: 16rpx 0 40rpx 0;
	padding: 20rpx 0 14rpx 0;
	border-radius: 10px;
}

.charts-box2 {
	margin-top: 40rpx;
}
</style>
